<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>胶水申请 - 胶水管理系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="header">
            <div class="logo">
                <i class="fas fa-tint"></i>
                <span>胶水管理系统</span>
            </div>
            <nav class="nav">
                <a href="apply.html" class="nav-item active">
                    <i class="fas fa-clipboard-list"></i>
                    <span>胶水申请</span>
                </a>
                <a href="production.html" class="nav-item">
                    <i class="fas fa-industry"></i>
                    <span>胶水房管理</span>
                </a>
                <a href="usage.html" class="nav-item">
                    <i class="fas fa-tools"></i>
                    <span>产线使用</span>
                </a>
                <a href="recycle.html" class="nav-item">
                    <i class="fas fa-recycle"></i>
                    <span>胶水回收</span>
                </a>
            </nav>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1><i class="fas fa-clipboard-list"></i> 胶水申请</h1>
                <p>产线申请胶水，填写需求信息</p>
            </div>

            <!-- 工单列表 -->
            <div class="table-container">
                <div class="table-header">
                    <h3><i class="fas fa-list"></i> 工单列表</h3>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>工单号</th>
                            <th>产品品号</th>
                            <th>产品名称</th>
                            <th>产线</th>
                            <th>工位</th>
                            <th>计划数量</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>WO-2024-001</td>
                            <td>MPO-001</td>
                            <td>MPO-MPO Harness</td>
                            <td>产线A</td>
                            <td>插芯注胶</td>
                            <td>100</td>
                            <td><span class="status-badge status-normal">进行中</span></td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="openApplyForm('WO-2024-001')">
                                    <i class="fas fa-plus"></i> 工单申请
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>WO-2024-002</td>
                            <td>MPO-002</td>
                            <td>MTP/MPO Harness</td>
                            <td>产线B</td>
                            <td>穿纤注胶</td>
                            <td>80</td>
                            <td><span class="status-badge status-normal">进行中</span></td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="openApplyForm('WO-2024-002')">
                                    <i class="fas fa-plus"></i> 工单申请
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>WO-2024-003</td>
                            <td>MPO-003</td>
                            <td>MPO Connector</td>
                            <td>产线C</td>
                            <td>固化</td>
                            <td>120</td>
                            <td><span class="status-badge status-normal">进行中</span></td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="openApplyForm('WO-2024-003')">
                                    <i class="fas fa-plus"></i> 工单申请
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 申请表单弹窗 -->
            <div class="modal-overlay" id="applyModal" style="display: none;">
                <div class="modal-container">
                    <div class="modal-header">
                        <h3><i class="fas fa-edit"></i> 胶水申请表单</h3>
                        <button class="modal-close" onclick="closeApplyModal()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    
                    <div class="modal-body">
                        <form id="glueApplyForm">
                            <!-- 基本信息 -->
                            <div class="form-section">
                                <h4><i class="fas fa-info-circle"></i> 基本信息</h4>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="workOrder">工单号</label>
                                        <input type="text" id="workOrder" class="form-control" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label for="useDate">用胶时间（日期）</label>
                                        <input type="date" id="useDate" class="form-control" value="">
                                    </div>
                                                            <div class="form-group">
                            <label for="useHour">用胶时间（小时）</label>
                            <select id="useHour" class="form-control">
                                <option value="">请选择</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="useMinute">用胶时间（分钟）</label>
                            <select id="useMinute" class="form-control">
                                <option value="">请选择</option>
                                <option value="00">00</option>
                                <option value="05">05</option>
                                <option value="10">10</option>
                                <option value="15">15</option>
                                <option value="20">20</option>
                                <option value="25">25</option>
                                <option value="30">30</option>
                                <option value="35">35</option>
                                <option value="40">40</option>
                                <option value="45">45</option>
                                <option value="50">50</option>
                                <option value="55">55</option>
                            </select>
                        </div>
                                </div>
                            </div>
                            
                            <!-- 胶水申请列表 -->
                            <div class="form-section">
                                <div class="section-header">
                                    <h4><i class="fas fa-list"></i> 胶水申请列表</h4>
                                    <button type="button" class="btn btn-success btn-sm" onclick="addGlueItem()">
                                        <i class="fas fa-plus"></i> 添加胶水
                                    </button>
                                </div>
                                
                                <div id="glueItemsList">
                                    <!-- 胶水申请项会动态添加到这里 -->
                                </div>
                            </div>
                            
                            <!-- 操作按钮 -->
                            <div class="form-actions">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-paper-plane"></i> 提交申请
                                </button>
                                <button type="button" class="btn btn-danger" onclick="closeApplyModal()">
                                    <i class="fas fa-times"></i> 取消
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 需求清单 -->
            <div class="table-container">
                <div class="table-header">
                    <h3><i class="fas fa-clipboard-check"></i> 需求清单</h3>
                </div>
                
                <!-- 筛选器 -->
                <div class="filter-container" style="padding: 16px 24px; background: #f8f9fa;">
                    <div class="filter-item">
                        <label>申请类型：</label>
                        <select id="applyTypeFilter">
                            <option value="today">今日申请</option>
                            <option value="history">历史申请</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>履约状态：</label>
                        <select id="fulfillmentFilter">
                            <option value="">全部</option>
                            <option value="pending">待配送</option>
                            <option value="delivered">已配送</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>时效状态：</label>
                        <select id="timingFilter">
                            <option value="">全部</option>
                            <option value="normal">正常</option>
                            <option value="expired">超时</option>
                        </select>
                    </div>
                </div>
                
                <table>
                    <thead>
                        <tr>
                            <th>工单号</th>
                            <th>产线</th>
                            <th>工位</th>
                            <th>胶水品类</th>
                            <th>产品品号</th>
                            <th>胶水规格</th>
                            <th>用胶数量</th>
                            <th>用胶时间</th>
                            <th>申请时间</th>
                            <th>履约状态</th>
                            <th>时效状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>WO-2024-001</td>
                            <td>产线A</td>
                            <td>插芯注胶</td>
                            <td>环氧树脂胶</td>
                            <td>MPO-001</td>
                            <td>整支</td>
                            <td>2</td>
                            <td>2024-01-15 14:30</td>
                            <td>2024-01-15 09:00</td>
                            <td><span class="status-badge status-pending">待配送</span></td>
                            <td><span class="status-badge status-normal">正常</span></td>
                            <td>
                                <button class="btn btn-danger btn-sm">
                                    <i class="fas fa-times"></i> 取消
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>WO-2024-002</td>
                            <td>产线B</td>
                            <td>穿纤注胶</td>
                            <td>UV胶</td>
                            <td>MPO-002</td>
                            <td>1/2支</td>
                            <td>1</td>
                            <td>2024-01-15 16:00</td>
                            <td>2024-01-15 10:30</td>
                            <td><span class="status-badge status-delivered">已配送</td>
                            <td><span class="status-badge status-normal">正常</span></td>
                            <td>
                                <button class="btn btn-danger btn-sm">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>WO-2024-003</td>
                            <td>产线C</td>
                            <td>固化</td>
                            <td>硅胶</td>
                            <td>MPO-003</td>
                            <td>1/3支</td>
                            <td>3</td>
                            <td>2024-01-14 15:00</td>
                            <td>2024-01-14 08:00</td>
                            <td><span class="status-badge status-pending">待配送</span></td>
                            <td><span class="status-badge status-expired">超时</span></td>
                            <td>
                                <button class="btn btn-warning btn-sm">
                                    <i class="fas fa-clock"></i> 继续等待
                                </button>
                                <button class="btn btn-danger btn-sm">
                                    <i class="fas fa-times"></i> 取消
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <!-- 分页 -->
                <div class="pagination">
                    <a href="#" class="page-item active">1</a>
                    <a href="#" class="page-item">2</a>
                    <a href="#" class="page-item">3</a>
                    <a href="#" class="page-item">下一页</a>
                </div>
            </div>
        </main>
    </div>

    <script src="scripts/main.js"></script>
    <script>
        // 设置默认日期为今天
        document.addEventListener('DOMContentLoaded', function() {
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('useDate').value = today;
        });

        // 打开申请表单弹窗
        function openApplyForm(workOrder) {
            document.getElementById('workOrder').value = workOrder;
            document.getElementById('applyModal').style.display = 'flex';
            
            // 初始化胶水申请列表
            initGlueItemsList();
        }

        // 关闭申请表单弹窗
        function closeApplyModal() {
            document.getElementById('applyModal').style.display = 'none';
            resetApplyForm();
        }

        // 初始化胶水申请列表
        function initGlueItemsList() {
            const glueItemsList = document.getElementById('glueItemsList');
            glueItemsList.innerHTML = '';
            
            // 默认添加一个胶水申请项
            addGlueItem();
        }

        // 添加胶水申请项
        function addGlueItem() {
            const glueItemsList = document.getElementById('glueItemsList');
            const itemId = Date.now() + Math.random().toString(36).substr(2, 9);
            
            const glueItem = document.createElement('div');
            glueItem.className = 'glue-item';
            glueItem.id = `glueItem_${itemId}`;
            
            glueItem.innerHTML = `
                <div class="glue-item-header">
                    <h5><i class="fas fa-tint"></i> 胶水申请项</h5>
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeGlueItem('${itemId}')">
                        <i class="fas fa-trash"></i> 删除
                    </button>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>胶水类型</label>
                        <select class="form-control glue-type" required>
                            <option value="">请选择胶水类型</option>
                            <option value="epoxy">环氧树脂胶</option>
                            <option value="uv">UV胶</option>
                            <option value="silicone">硅胶</option>
                            <option value="cyanoacrylate">氰基丙烯酸酯</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>胶水品号</label>
                        <select class="form-control glue-code" required>
                            <option value="">请选择胶水品号</option>
                            <option value="EP-001">EP-001 (环氧树脂胶A)</option>
                            <option value="EP-002">EP-002 (环氧树脂胶B)</option>
                            <option value="UV-001">UV-001 (UV胶A)</option>
                            <option value="UV-002">UV-002 (UV胶B)</option>
                            <option value="SI-001">SI-001 (硅胶A)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>胶水规格</label>
                        <select class="form-control glue-spec" required>
                            <option value="">请选择规格</option>
                            <option value="full">整支</option>
                            <option value="half">1/2支</option>
                            <option value="third">1/3支</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>申请数量</label>
                        <input type="number" class="form-control glue-quantity" min="1" value="1" required>
                    </div>
                </div>
            `;
            
            glueItemsList.appendChild(glueItem);
        }

        // 删除胶水申请项
        function removeGlueItem(itemId) {
            const glueItemsList = document.getElementById('glueItemsList');
            const items = glueItemsList.querySelectorAll('.glue-item');
            
            // 至少保留一个申请项
            if (items.length > 1) {
                const itemToRemove = document.getElementById(`glueItem_${itemId}`);
                if (itemToRemove) {
                    itemToRemove.remove();
                }
            } else {
                alert('至少需要保留一个胶水申请项');
            }
        }

        // 重置申请表单
        function resetApplyForm() {
            document.getElementById('glueApplyForm').reset();
            document.getElementById('useDate').value = new Date().toISOString().split('T')[0];
            initGlueItemsList();
        }

        // 表单提交处理
        document.getElementById('glueApplyForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取基本信息
            const basicInfo = {
                workOrder: document.getElementById('workOrder').value,
                useDate: document.getElementById('useDate').value,
                useHour: document.getElementById('useHour').value,
                useMinute: document.getElementById('useMinute').value
            };

            // 验证基本信息
            if (!basicInfo.useHour || !basicInfo.useMinute) {
                alert('请填写完整的用胶时间信息');
                return;
            }

            // 获取胶水申请列表
            const glueItems = document.querySelectorAll('.glue-item');
            const glueApplications = [];

            glueItems.forEach((item, index) => {
                const glueType = item.querySelector('.glue-type').value;
                const glueCode = item.querySelector('.glue-code').value;
                const glueSpec = item.querySelector('.glue-spec').value;
                const quantity = item.querySelector('.glue-quantity').value;

                // 验证胶水信息
                if (!glueType || !glueCode || !glueSpec || !quantity) {
                    alert(`请填写第${index + 1}个胶水申请项的完整信息`);
                    return;
                }

                glueApplications.push({
                    glueType: glueType,
                    glueCode: glueCode,
                    glueSpec: glueSpec,
                    quantity: quantity
                });
            });

            if (glueApplications.length === 0) {
                alert('请至少添加一个胶水申请项');
                return;
            }

            // 构建完整的申请数据
            const formData = {
                ...basicInfo,
                glueApplications: glueApplications,
                totalItems: glueApplications.length
            };

            console.log('申请数据:', formData);

            // 模拟提交成功
            alert(`申请提交成功！共申请${glueApplications.length}种胶水`);
            closeApplyModal();
        });

        // 筛选器功能
        document.getElementById('applyTypeFilter').addEventListener('change', function() {
            console.log('申请类型筛选:', this.value);
            // 这里可以添加实际的筛选逻辑
        });

        document.getElementById('fulfillmentFilter').addEventListener('change', function() {
            console.log('履约状态筛选:', this.value);
            // 这里可以添加实际的筛选逻辑
        });

        document.getElementById('timingFilter').addEventListener('change', function() {
            console.log('时效状态筛选:', this.value);
            // 这里可以添加实际的筛选逻辑
        });
    </script>
</body>
</html>
